<template>
    <div class="menu">
        
        <el-menu
            :default-active="activeMenu"
            :default-openeds="openSubMenu"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            @select="handleSelect"
        >
            <template v-for="menu in menus" :key="menu.Id">
                <el-sub-menu v-if="menu.children && menu.children.length != 0" :key="menu.Name" :index="menu.Name">
                    <template #title>
                        <el-icon><component :is="menu.Icon"></component></el-icon>
                        <span>{{menu.Title}}</span>
                    </template>
                    <el-menu-item  v-for="item in menu.children"  :key="item.Name" :index="item.Name">
                        <el-icon v-if="item.Icon"><component :is="item.Icon"></component></el-icon>
                        <template #title>{{item.Title}}</template>
                    </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-if="!menu.children || menu.children.length === 0" :index="menu.Name">
                    <el-icon v-if="menu.Icon"><component :is="menu.Icon"></component></el-icon>
                    <template #title>{{menu.Title}}</template> 
                </el-menu-item>
            </template>
            
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useMenuStore } from '@/store/menu';
import { useRoute } from 'vue-router';
let props = defineProps({
    isCollapse: {
        type: Boolean,
        default: false
    }
})
let activeMenu = ref();
let openSubMenu = ref<any>([]);
const route = useRoute()
console.log(route);
activeMenu.value = route.name;
for(let i = 0; i < route.matched.length; i++){
    if(route.matched[i].children.length != 0){
        openSubMenu.value.push(route.matched[i].name)
    }
}
let menuStore = useMenuStore()
let menuList = localStorage.getItem('menus');
let menus = ref(menuList ? JSON.parse(menuList) : []);
// dynamicRoutes(menus.value);

// const isCollapse = ref(true)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
  // 路由跳转

  menuStore.setActiveMenu(key);
//   menuStore.setActivePath(keyPath);
  // console.log('activeMenu:', menuStore.activeMenu);
  // console.log('activePath:', menuStore.activePath);
}
</script>

<style lang="less">

.menu {
  width: 200px;
  height: 100%;
  border-right: 1px solid #e4e7ed;
}
.el-menu--collapse{
    width: 20%;
    height: 100%;
}
.el-menu{
    height: 100%;
}
.el-menu-item.is-active {
    color: #009688 !important;
    background-color: #e6f5f3 !important;
}

.el-menu-item.is-active:before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    content: "";
    background-color: #009688;
}

.el-menu--collapse .is-active .el-sub-menu__title
 {
    color: #fff !important;
    background-color: #009688 !important;
}
</style>